<template>
	<view>
		<global-contact></global-contact>
		<!-- #ifdef MP-WEIXIN -->
		<view class="header">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="header header-top-h5">
				<!-- #endif -->
				<view class="head">
					<image style="width: 30rpx;height: 30rpx;" src="https://www.atuanjian.com/appletStatic/static/local.png" mode=""></image>
					<view class="local" @click="chooseCity()">
						<text>{{currentCity.lastIndexOf('市')?currentCity.replace(/市/,""):currentCity}}</text>
						<view class="trang"></view>
					</view>
					<view class="search">
						<u-search @search="search()" placeholder="户外拓展/团建/骑行" :showAction="false"
							v-model="keyword"></u-search>
					</view>
					<image @click="changeSort()" src="https://www.atuanjian.com/appletStatic/static/sort.png" mode="aspectFit"></image>
					<u-line direction="col" length="24rpx" color="#E7E7E7"></u-line>
					<image @click="filtrate()" src="https://www.atuanjian.com/appletStatic/static/choice.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="content">
				<view class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
					<view class="left">
						<image class="goods" :src="showImg+item.img" mode="aspectFill"></image>
						<image class="logo" :src="showImg+item.logo" mode="aspectFit"></image>
					</view>
					<view class="right">
						<view class="tip">{{item.company_name||''}}</view>
						<view class="title">{{item.title||''}}</view>
						<view class="des">{{item.abstract||''}}</view>
						<view class="footer">
							<view class="items">
								<image src="https://www.atuanjian.com/appletStatic/static/ic1.png" mode="aspectFit"></image>
								<text>{{item.people_num||'0'}}人</text>
							</view>
							<view class="items">
								<image src="https://www.atuanjian.com/appletStatic/static/ic2.png" mode="aspectFit"></image>
								<text>{{item.activity_day||''}}</text>
							</view>
							<view class="items">
								<image src="https://www.atuanjian.com/appletStatic/static/ic3.png" mode="aspectFit"></image>
								<text class="local">{{item.place_title||'暂无地址'}}</text>
							</view>
							<view class="items">
								<image src="https://www.atuanjian.com/appletStatic/static/ic4.png" mode="aspectFit"></image>
								<text>{{item.hit||0}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="list" v-if="list.length==0">
					<u-empty mode="list" :text="uEmptyText" icon="http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
				</view>
			</view>
			<view class="talk">
				<image src="https://www.atuanjian.com/appletStatic/static/ask.png" mode="aspectFit"></image>
				<image src="https://www.atuanjian.com/appletStatic/static/top.png" mode="aspectFit" v-if="show" @click="scrollTop"></image>
				<button type="default" open-type="contact"></button>
			</view>

			<u-picker :show="showCity" :columns="cityList" @cancel="cancel1" @confirm="confirm1"></u-picker>

			<u-picker :show="showSort" keyName="label" :columns="sortList" @cancel="cancelSort"
				@confirm="confirmSort"></u-picker>

		</view>
</template>

<script>
	import {
		productCase,
		siteSetting
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				showImg: '',
				show: false,
				keyword: '',
				list: [],
				page: 0,
				totalPage: 1,
				priceSort: '',
				showCity: false,
				cityList: [],
				currentCity: uni.getStorageSync('webAddress'),
				showSort: false,
				sortList: [
					[{
						label: '默认排序',
						value: ''
					}, {
						label: '浏览量低到高',
						value: 'asc'
					}, {
						label: '浏览量高到低',
						value: 'desc'
					}]
				],
				catId: '',
				newUrl: '',
				uEmptyText: '数据加载中...',
			}
		},
		methods: {
			changeSort() {
				this.showSort = true
			},
			cancelSort() {
				this.showSort = false
			},
			confirmSort(e) {
				this.priceSort = e.value[0].value
				this.showSort = false
				this.page = 0
				this.list = []
				this.getList()
			},

			async productCase(data) {
				return await productCase(data)
			},
			async siteSetting() {
				return await siteSetting()
			},
			cancel1() {
				this.showCity = false
			},
			confirm1(event) {
				uni.setStorageSync('webAddress', event.value[0])
				this.currentCity = event.value[0]
				this.showCity = false
				this.page = 0
				this.list = []
				this.getList()
			},
			getSetting() {
				this.siteSetting().then(res => {
					uni.setStorageSync('webAddress', res.default_substation)
					// this.currentCity=res.default_substation
					if (res.city && res.city.length > 0) {
						this.cityList.push(res.city)
					}
					// this.defaultMethods()
				})
			},
			getList() {
				let data = {
					catid: 5,
					p: this.page,
					n: 10,
					typeId: this.catId,
					search: this.keyword,
					priceSort: this.priceSort
				}
				this.productCase(data).then(res => {
					if (res.count < 1) {
						this.$data.uEmptyText = '暂无数据';
						return false;
					}
					if (res.list && res.list.length > 0) {
						this.list = [...this.list, ...res.list]
						this.totalPage = Math.ceil(res.count / 10)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			chooseCity() {
				this.showCity = true
			},
			search() {
				// if(!this.keyword.trim()){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请输入关键词'
				// 	})
				// 	return;
				// } 
				this.page = 0
				this.list = []
				this.catId = ''
				// #ifdef H5
				var redirectToUrl = this.$route.fullPath;
				if (this.$route.query['search']) {
					// console.log(this.$route.query['search'])
					redirectToUrl = redirectToUrl.replace('search='+this.$route.query['search'], 'search='+this.keyword); // 替换搜索内容
				} else {
					redirectToUrl += `&search=${this.keyword}`; // 携带参数
				}
				if (this.$route.query['keywords']) {
					redirectToUrl = redirectToUrl.replace('keywords='+this.$route.query['keywords'], 'keywords='+this.keyword); // 替换搜索内容
				} else {
					redirectToUrl += `&keywords=${this.keyword}`; // 携带参数
				}
				uni.redirectTo({
					url: redirectToUrl
				});
				// #endif
				// #ifdef MP-WEIXIN
				this.getList();
				// #endif
			},

			filtrate() {
				uni.navigateTo({
					url: '/pagesB/annualMeeting/filtrate?categoryId=5' + '&typeId=' + this.catId
				})
			},
			scrollTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pagesA/detail/case?id=${item.id}`
				})
				// uni.navigateTo({
				// 	url:'/pages/detail/place'
				// }) 
			}
		},
		onLoad(option) {
			this.showImg = this.$config.showImgApi;
			if (option.id) {
				this.catId = uni.getStorageSync(option.id)
			}
			if (option.typeId) {
				this.catId = option.typeId
			}
			if (option.keywords) {
				this.keyword = option.keywords
			}
			this.getSetting()
			if (option.title_text) {
				uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
					title: option.title_text // 自定义标题内容
				})
			}
		},
		onShow() {
			let option;
			// #ifdef H5
			option = this.options;
			// #endif
			// #ifdef MP-WEIXIN
			option = this.$mp.query;
			// #endif
			if (option && option.id && uni.getStorageSync(option.id)) {
				this.catId = uni.getStorageSync(option.id);
				if (!option.typeId) {
					// #ifdef H5
					const newUrl = location.href + `&typeId=${this.catId}`;
					history.pushState({}, null, newUrl);
					// #endif
					// #ifdef MP-WEIXIN
					const newUrl = this.$mp.page.$page.fullPath + `&typeId=${this.catId}`;
					this.newUrl = newUrl;
					// #endif
				} else {
					// #ifdef H5
					const includeQuestion = location.href.includes('?');
					let url = includeQuestion ? location.href.split('?')[0] : location.href;
					const newUrl = url + `?id=${option.id}&typeId=${this.catId}`;
					history.pushState({}, null, newUrl);
					// #endif
				}
				uni.removeStorageSync(option.id);
			} else if (option && option.typeId) {
				this.catId = option.typeId;
			}
			this.page = 0
			this.list = [];
			this.getList();
			// if(uni.getStorageSync('goods')){
			// 	// this.keyword=JSON.parse(uni.getStorageSync('goods'))[0]
			// 	let arr=JSON.parse(uni.getStorageSync('goods'))
			// 	// catId
			// 	let arrid=[]
			// 	arr.forEach(val=>{
			// 		arrid.push(val.id)
			// 	})
			// 	if (this.options && this.options.typeId) {
			// 		this.catId = this.options.typeId
			// 	} else if (this.options && this.options.id && uni.getStorageSync(this.options.id)) {
			// 		this.catId = uni.getStorageSync(this.options.id)
			// 	} else {
			// 		this.catId=arrid.join(',');
			// 	}

			// 	this.page=0
			// 	this.list=[]
			// 	this.getList()
			// 	uni.removeStorageSync('goods')
			// }
		},
		onPageScroll(e) {
			if (e.scrollTop > 120) {
				this.show = true
			} else {
				this.show = false
			}
		},
		onReachBottom() {
			if (this.page < this.totalPage - 1) {
				this.page++
				this.getList();
			}
		},
		onShareAppMessage() {
			return {
				title: '西安蚂蚁团建',
				path: this.newUrl
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.header {
		background: #FFB850;
		width: 750rpx;
		height: 88rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;

		.head {
			@include flex_style(space-between, center, row nowrap);
			padding: 16rpx 22rpx 16rpx 30rpx;

			.local {
				@include flex_style(flex-start, center, row nowrap);

				text {
					display: block;
					max-width: 85rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 38rpx;
					color: #FFFFFF;
				}

				.trang {
					width: 0;
					height: 0;
					border-left: 7rpx solid transparent;
					border-right: 7rpx solid transparent;
					border-top: 10rpx solid #FFFFFF;
					margin-left: 8rpx;
				}
			}

			.search {
				width: 440rpx;
				height: 56rpx;

				::v-deep.u-search__content {
					background-color: #F5F5F5 !important;
					border-width: 0;
				}

				::v-deep.u-search__content__input {
					height: 56rpx !important;
					background-color: #F5F5F5 !important;
					border-width: 0;
				}
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}

		}
	}

	.content {
		padding: 88rpx 18rpx 0 24rpx;

		.item {
			@include flex_style(space-between, center, row nowrap);
			padding: 34rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
			;

			.left {
				width: 240rpx;
				height: 208rpx;
				position: relative;

				.goods {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}

				.logo {
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 10;
				}
			}

			.right {
				width: 446rpx;

				.tip {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 22rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 30rpx;
					color: #1A1A1A;
					margin-bottom: 14rpx;
				}

				.title {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 42rpx;
					color: #FFB850;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 12rpx;
				}

				.des {
					width: 446rpx;
					height: 72rpx;
					font-size: 20rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 36rpx;
					color: #333333;
					@include word_over(2);
					margin-bottom: 14rpx;
				}

				.footer {
					@include flex_style(space-between, center, row nowrap);
					white-space: nowrap;

					.items {
						@include flex_style(flex-start, center, row nowrap);

						image {
							width: 25rpx;
							height: 25rpx;
							margin-right: 4rpx;
						}

						text {
							font-size: 18rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 24rpx;
							color: #888888;
						}

						.local {
							max-width: 88rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}

	.talk {
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 99;
		@include flex_style(flex-end, flex-end, column nowrap);

		image {
			width: 180rpx;
			height: 180rpx;
		}

		button {
			width: 180rpx;
			height: 180rpx;
			padding: 0;
			margin: 0;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 233;
			opacity: 0;
		}
	}
</style>